<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

    class Button extends React.Component {
        render() {
            return (
                    <button style={{background: this.props.color}}>
                        {this.props.children}
                    </button>
            );
        }
    }

    class Message extends React.Component {
        render() {
            return (
                    <div>
                        {this.props.text} <Button color={this.props.color}>{this.props.text}</Button>
                    </div>
            );
        }
    }

    class MessageList extends React.Component {
        render() {
            const children = this.props.messages.map((message) =>
                    <Message text={message.text} color={message.color} />
            );
            return <div>{children}</div>;
        }
    }
    const message = [
        {text:"what?", color : "red"},
        {text:"the?", color : "green"},
        {text:"fuck?", color : "white"}

    ];
    ReactDOM.render(
        <MessageList messages={message}/>,
        document.getElementById("example")
    );
</script>
</body>
</html>

